<template>
	<div class="content">
		<div class="content-header">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>移动管理</el-breadcrumb-item>
				<el-breadcrumb-item>
					<b>APP用户</b>
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="content-body">
			<el-scrollbar>
				<div class="panel">
					<el-form :model="appUserSearchForm" ref="appUserSearchForm" inline label-width="100px">
						<el-row>
							<el-col :md="8">
								<el-form-item label="用户名">
									<el-input v-model="appUserSearchForm.uname"></el-input>
								</el-form-item>
							</el-col>
							<el-col :md="8">
								<el-form-item label="手机号">
									<el-input v-model="appUserSearchForm.phone"></el-input>
								</el-form-item>
							</el-col>
							<el-col :md="8">
								<el-form-item label="昵称">
									<el-input v-model="appUserSearchForm.nickname"></el-input>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :md="8">
								<el-form-item label="状态">
									<el-select v-model="appUserSearchForm.status" placeholder="请选择">
										<el-option v-for="item in statusList" :key="item.id" :label="item.name"
											:value="item.id"></el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :md="8">
								<el-form-item label="注册时间">
									<div style="display: flex; justify-content: space-between; justify-items: center;">
										<el-date-picker type="date" placeholder="选择日期" value-format="yyyy-MM-dd"
											v-model="appUserSearchForm.registerTimeStart" style="width:130px;">
										</el-date-picker>
										<div style="margin: 0 5px;"> ~ </div>
										<el-date-picker type="date" placeholder="选择日期" value-format="yyyy-MM-dd"
											v-model="appUserSearchForm.registerTimeEnd" style="width:130px;">
										</el-date-picker>
									</div>
								</el-form-item>
							</el-col>
							<el-col :md="8" class="search-btn">
								<div class="search-btn-right">
									<el-button type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
									<el-button icon="el-icon-refresh" @click="resetForm">重置</el-button>
								</div>
							</el-col>
						</el-row>
					</el-form>
					<el-table :data="tableData" border stripe style="width: 100%">
						<el-table-column label="序号" width="60" header-align="left" align="center">
							<template
								slot-scope="scope">{{scope.$index + 1 + (tableCurrentPage-1)*tablePageSize}}</template>
						</el-table-column>
						<el-table-column label="用户名" prop="uname"></el-table-column>
						<el-table-column label="手机号" prop="phone"></el-table-column>
						<el-table-column label="昵称" prop="nickname"></el-table-column>
						<el-table-column label="性别" prop="sex">
							<template slot-scope="scope">
								<span v-if="scope.row.sex == '0'">女</span>
								<span v-else-if="scope.row.sex == '1'">男</span>
								<span v-else-if="scope.row.sex == '2'">未知</span>
								<span v-else>--</span>
							</template>
						</el-table-column>
						<el-table-column label="状态" prop="status">
							<template slot-scope="scope">
								<span v-if="scope.row.status == '0'">正常</span>
								<span v-else-if="scope.row.status == '1'">注销</span>
								<span v-else>禁用</span>
							</template>
						</el-table-column>
						<el-table-column label="注册方式" prop="registerType">
							<template slot-scope="scope">
								<span v-if="scope.row.registerType == '1'">微信小程序授权</span>
								<span v-else-if="scope.row.registerType == '2'">手机号注册</span>
								<span v-else>APP微信授权</span>
							</template>
						</el-table-column>
						<el-table-column label="注册时间" prop="registerTime">
							<template slot-scope="scope">
								<span>{{scope.row.registerTime}}</span>
							</template>
						</el-table-column>
						<el-table-column label="操作" min-width="100px">
							<template slot-scope="scope">
								<el-button type="info" @click="handleDetail(scope.row.id)">详情</el-button>
								<el-button v-if="scope.row.status == '2'" type="warning"
									@click="handleRecovery(scope.row.id)">恢复</el-button>
								<el-button v-if="scope.row.status == '0'" type="danger"
									@click="handleDisable(scope.row.id)">禁用</el-button>
							</template>
						</el-table-column>
					</el-table>
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
						:current-page.sync="tableCurrentPage" :page-sizes="[10, 20, 30, 50]"
						:page-size.sync="tablePageSize" layout="total, jumper, prev, pager, next, sizes"
						:total="tableTotal"></el-pagination>
				</div>
			</el-scrollbar>
			<AppUser ref="appUser"></AppUser>
		</div>
	</div>
</template>

<script>
	import AppUser from "./AppUser";
	export default {
		components: {
			AppUser
		},
		data() {
			return {
				appUserSearchForm: {
					uname: null,
					phone: null,
					nickname: null,
					status: "0",
					registerTimeStart: null,
					registerTimeEnd: null
				},
				statusList: [
					{
						id: "0",
						name: "正常"
					},
					{
						id: "1",
						name: "注销"
					},
					{
						id: "2",
						name: "禁用"
					}
				],
				tableTotal: 0,
				tableCurrentPage: 1,
				tablePageSize: 10,
				tableData: []
			};
		},
		mounted() {
			this.getTableData(this.tableCurrentPage, this.tablePageSize);
		},
		methods: {
			handleSizeChange(val) {
				this.getTableData(this.tableCurrentPage, val);
			},
			handleCurrentChange(val) {
				this.getTableData(val, this.tablePageSize);
			},
			handleSearch() {
				this.getTableData(this.tableCurrentPage, this.tablePageSize);
			},
			getTableData(page, pageSize) {

				let pageParams = '?page=' + page + '&rows=' + pageSize;

				this.$api.post('/appUser/findByPage' + pageParams, this.appUserSearchForm).then(
					response => {
						this.tableData = response.data.list;
						this.tableTotal = response.data.total;
					}
				);
			},
			resetForm() {
				this.appUserSearchForm = {
					uname: null,
					phone: null,
					nickname: null,
					status: "0",
					registerTimeStart: null,
					registerTimeEnd: null
				};
				this.getTableData(1, this.tablePageSize);
			},
			handleDetail(id) {
				this.$refs.appUser.initForm(id);
			},
			handleRecovery(id) {
				this.$confirm("确认恢复此账号?", "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning"
				}).then(() => {
					this.$api.post('/appUser/disable', {
						id: id,
						status: '0'
					}).then(response => {
						if (response.success) {
							this.$message.success(response.message);
							this.handleSearch();
						} else {
							this.$message.error(response.message);
						}
					});
				}).catch(() => {});
			},
			handleDisable(id) {
				this.$confirm("确认禁用此账号?", "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning"
				}).then(() => {
					this.$api.post('/appUser/disable', {
						id: id,
						status: '2'
					}).then(response => {
						if (response.success) {
							this.$message.success(response.message);
							this.handleSearch();
						} else {
							this.$message.error(response.message);
						}
					});
				}).catch(() => {});
			}
		}
	};
</script>
